<template>
	<view class="refundView-contanier" v-if="isLoading">
		<view class="refundView-content">
			<view class="module steps">
				<u-steps :current="setp[refund.status]">
					<u-steps-item title="已申请"></u-steps-item>
					<u-steps-item title="处理中"></u-steps-item>
					<u-steps-item title="已完成"></u-steps-item>
				</u-steps>
				<view class="return-btn" v-if="refund.auditStatus==10&&refund.order.deliveryType!=20&&refund.type==20">
					<sales-return :returnId="refund.returnId">
						<!-- //2929542797563674624 -->
						<button slot="refund">开始退货</button>
						<button slot="refund_detail">查看详情</button>
					</sales-return>
				</view>
			</view>
			<!-- <view class="module consult  flex-sb">
				<view class="title" style="margin-bottom: 0px;">寄件详情</view>
				<unt-icon name="icon-arrow" size="12" color="#999999"></unt-icon>
			</view>
			<view class="module consult  flex-sb">
				<view class="title" style="margin-bottom: 0px;">协商记录</view>
				<unt-icon name="icon-arrow" size="12" color="#999999"></unt-icon>
			</view> -->
			<view class="module info">
				<view class="title">退款信息</view>
				<unt-goods-detail :data="[refund.orderGoods]" modal="order"></unt-goods-detail>
				<view class="refund-item-content-info">
					<view class="item">
						<view class="name">退款原因</view>
						<view class="text">{{refund.applyDesc}}</view>
					</view>
					<view class="item">
						<view class="name">退款金额</view>
						<view class="text">{{refund.refundMoney}}</view>
					</view>
					<view class="item">
						<view class="name">申请件数</view>
						<view class="text">{{refund.orderGoods.totalNum}}</view>
					</view>
					<view class="item">
						<view class="name">申请时间</view>
						<view class="text">{{refund.createTime}}</view>
					</view>
					<view class="item">
						<view class="name">退款编号</view>
						<view class="text">{{refund.orderRefundNo}}</view>
					</view>
					<view class="item">
						<view class="name">审核状态</view>
						<view class="text">{{auditText[refund.auditStatus]}}</view>
					</view>
					<view class="item" v-if="refund.auditStatus==20">
						<view class="name">拒绝原因</view>
						<view class="text">{{refund.refundReason||"无"}}</view>
					</view>
					<view class="item">
						<view class="name">售后单状态</view>
						<view class="text">{{statusText[refund.status]}}</view>
					</view>
				</view>
			</view>
			<!-- 退货地址 -->
			<view class="module info address" v-if="refund.auditStatus==10&&refund.order.deliveryType!=20&&refund.type==20">
				<view class="title"><text>退货地址</text><unt-icon name="icon-fuzhi" color="#000" @click="copyAddress()"></unt-icon></view>
				<view class="refund-item-content-info">
					<view class="item">
						<view class="name">收件人</view>
						<view class="text">{{address.name}}</view>
					</view>
					<view class="item">
						<view class="name">手机号</view>
						<view class="text">{{address.phone}}</view>
					</view>
					<view class="item">
						<view class="name">地址</view>
						<view class="text">{{address.region.fullName}}{{address.detail}}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="fixed-bottom-content bottom-fixed">
			<view class="btn delete" v-if="refund.status!=20&&refund.status!=30" @click="revokeRefund(refund,40)">撤销申请
			</view>
			<view class="btn delete" v-if="refund.status==30" @click="revokeRefund(refund,40)">删除记录</view>
			<view class="btn delete" v-if="refund.auditStatus==20" @click="afterSales(refund.order.orderId)">再次发起</view>
		</view>
	</view>
</template>

<script>
	import * as Sell from '@/api/sell/index.js'
	export default {
		data() {
			return {
				isLoading: false,
				options: {},
				refund: {},
				setp: {
					0: 1,
					10: 1,
					20: 2,
					30: 2
				},
				statusText: {
					0: '进行中',
					10: '已拒绝',
					20: '已完成',
					30: '已取消'
				},
				auditText: {
					0: '待审核',
					10: '已同意',
					20: '已拒绝'
				},
				address:{}
			}
		},
		onLoad(options) {
			this.options = options;
			this.getPageData();
		},
		methods: {
			copyAddress() {
				const addr=this.address;
				const value=`收件人：${addr.name} 收件人手机号：${addr.phone} 地址：${addr.region.fullName}${addr.detail}  `;
				uni.setClipboardData({
					data: value, 
					success: () => { 
						this.$unts.toast("复制成功！")
					}
				});
			},
			afterSales(id) {
				this.$unts.navTo("pages_order/afterSales/afterSales", {
					orderId: id
				})
			},
			getPageData() {
				this.isLoading = false;
				Sell.detial({
					orderRefundId: this.options.id
				}).then(res => {
					this.refund = res.data;
					this.address = res.data.storeAddress
					this.isLoading = true;
				})
			},
			// 撤销申请
			revokeRefund(v, num) {
				const app = this;
				uni.showModal({
					title: '提示',
					content: num == 30 ? '确认要撤销售后申请吗？' : '确认要删除此售后记录吗？',
					success: function(res) {
						if (res.confirm) {
							Sell.revoke({
								orderRefundId: v.orderRefundId,
								status: num,
							}).then(res => {
								if (num == 30) {
									app.getPageData();
								} else {
									uni.navigateBack({
										delta: 1
									})
								}
							})
						}
					}
				});
			}
		}
	}
</script>
<style>
	page {
		background: #F0F0F0;
	}

	.dialog--weui-half-screen-dialog-express-inner {
		background-color: #fff !important;
	}
</style>
<style lang="scss" scoped>
	.refundView-contanier {
		position: relative;
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 0px 20rpx;

		.refundView-content {
			width: 100%;
			margin-bottom: 130rpx;

			.steps {
				padding: 40rpx 20rpx !important;

				.return-btn {
					width: 100%;
					display: flex;
					justify-content: center;
					align-items: center;
					margin-top: 30rpx;

					.btn-normal {
						padding: 20rpx 50rpx;
						background: linear-gradient(to right, #01ab63, #09BF09);
						color: #fff;
						border-radius: 10rpx;
					}
				}
			}

			.module {
				width: 100%;
				background: #fff;
				padding: 25rpx 20rpx;
				border-radius: 25rpx;
				margin-top: 30rpx;

				.title {
					margin-bottom: 20rpx;
					font-weight: 600;
					font-size: 30rpx;
					    display: flex;
					    justify-content: space-between;
				}

			}

			.info {
				.refund-item-content-info {
					.item {
						margin-top: 20rpx;
						font-size: 28rpx;
						display: flex;
						justify-content: space-between;

						.name {
							color: #999;
						}

						.text {
							margin-left: 30rpx;
						}
					}
				}
			}
			.address{
				margin-bottom: 20px;
			}
		}

		.fixed-bottom-content {
			padding: 25rpx 20rpx 25rpx 20rpx;
			justify-content: flex-end;

			.btn {
				border-radius: 150rpx;
				padding: 10rpx 30rpx;
				font-size: 28rpx;
				margin-left: 20rpx;
				border: 1px solid #000;
			}
		}
	}
</style>